<template>
  <div class="window-drag-area flex border-b *:cursor-pointer *:place-items-center *:transition-colors"
    style="height: 32px; background-color: rgba(255, 255, 255, 0.2); ">
    <div style="margin-left: 10px; width: 210px;"><span>当前位置：{{ currentRouteTitle }}</span></div>
    <button style="color: black; margin-left: 20px; " @click="minimizeWindow" title="最小化">
      <Minus />
    </button>
    <button style="color: black; margin-left: 20px;" @click="closeWindow" title="关闭">
      <X />
    </button>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import { getCurrentWindow } from "@tauri-apps/api/window";
import { Minus, X } from "lucide-vue-next";
import { useRoute } from 'vue-router';
// 获取当前路由对象
const route = useRoute();

//路由
// const currentRouteTitle = ref(route.meta.title);
const currentRouteTitle = ref("主页");
watch(
  () => route.path,
  () => {
    currentRouteTitle.value = route.meta.title || '';
  }
);

const minimizeWindow = async () => {
  await getCurrentWindow().minimize();
};

const closeWindow = async () => {
  await getCurrentWindow().close();
};
</script>

<style scoped>
.window-drag-area {
  -webkit-app-region: drag;

  /* 允许拖动 */
  button {
    -webkit-app-region: no-drag;
    /* 禁止拖动 */
  }
}
</style>